<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>qq时光轴 - GN</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<style type="text/css">
		html{height:100%;}
		body{height:100%;}
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#666;}
			img{border:0;}
			/*timeline start*/
			.timeline{width:1100px;margin:0 auto;position:relative;padding: 68px 0 0 166px;}
			.timeline .t_line{width:5px;height:1500px;background:#ccc;position:absolute;left:200px;top:135px;}
			.timeline .t_send{width:700px;height:200px;}
			.timeline .t_send .t_header{float:left;}
			.timeline .t_send .t_header img{border-radius:33px;}
			.timeline .t_send .t_icon{width:13px;height:16px;background:url("images/sanjiao1.png") no-repeat;float:left;margin: 27px 0 0 10px;}
			.timeline .t_send .t_box{width:600px;height:165px;background:#fff;float:left;border-radius: 3px;position:relative;}
			.timeline .t_send .t_box .t_msg{width:540px;height:50px;border:1px solid #ccc;margin:0 auto;padding:10px;outline:none;overflow:auto;}
			.timeline .t_send .t_box .t_msg img{margin:2px;}
			.timeline .t_send .t_box .t_title{padding: 10px 0 15px 15px;font-size:14px;}
			.timeline .t_send .t_box .t_face_btn{float:left;margin: 15px 0 0 16px;}
			.timeline .t_send .t_box .t_send_btn{float:right;width:80px;height:32px;background:#F60;text-decoration:none;text-align:center;line-height:32px;font-size:14px;color:#fff;margin: 8px 20px 0 0;border-radius:3px;}
			.timeline .t_send .t_box .t_send_btn:hover{background:#F00;}
			.timeline .t_send .t_box .t_face_con{width:365px;height:180px;border:1px solid #ccc;background:#fff;box-shadow: 1px 2px 6px 0px #000;position:absolute;left:24px;top:158px;padding:5px;display:none;z-index:1;}
			.timeline .t_send .t_box .t_face_con ul li{list-style:none;float:left;margin:2px;cursor: pointer;}
			.timeline .t_all{width:1100px;position:relative;}
			.timeline .t_all .l_header{float:left;}
			.timeline .t_all .t_list{float:left;margin:20px 0;}
			.timeline .t_all .t_list .l_icon{width:13px;height:16px;background:url("images/sanjiao1.png") no-repeat;float:left;margin: 27px 0 0 10px;}
			.timeline .t_all .t_list .l_header img{border-radius:33px;}
			.timeline .t_all .t_list .l_msg{width:500px;background:#fff;float:left;border-radius:3px;padding:16px;font-size:14px;}
			.clear{clear:both;}
			/*end timeline*/
			
			.bg_gn{background:url("images/body_bg.jpg") top center;position:fixed;width:100%;height:100%;background-repeat:no-repeat;background-size: cover;}

		</style>
	<link type="text/css" rel="stylesheet" href="css/animate.css"></link>
	<link type="text/css" rel="stylesheet" href="sg/css/sg.css"></link>
	</head>
<body>

<div class="bg_gn"></div>

	<!--timeline start-->
	<div class="timeline">
		<div class="t_line"></div>
		<div class="t_send">
			<div class="t_header">
				<img src="images/arry.jpg" alt="最帅的GN" width="66" height="66"/>
			</div>
			<div class="t_icon"></div>
			<div class="t_box">
				<p class="t_title">有什么新鲜事想告诉大家?</p>			
				<div class="t_msg" contenteditable="true"></div>
				<p class="t_face">
					<a href="#" class="t_face_btn"><img src="images/face/cza_thumb.gif" alt="表情" width="22" height="22" /></a>
					<a href="#" class="t_send_btn">发 表</a>
				</p>
				<div class="t_face_con">
					<ul id="q_ul">
						<li><img src="images/face/zz2_thumb.gif" title="[织]" width="22" height="22"></li>
						<li><img src="images/face/horse2_thumb.gif" title="[神马]"></li>
						<li><img src="images/face/fuyun_thumb.gif" title="[浮云]"></li>
						<li><img src="images/face/geili_thumb.gif" title="[给力]"></li>
						<li><img src="images/face/wg_thumb.gif" title="[围观]"></li>
						<li><img src="images/face/vw_thumb.gif" title="[威武]"></li>
						<li><img src="images/face/panda_thumb.gif" title="[熊猫]"></li>
						<li><img src="images/face/rabbit_thumb.gif" title="[兔子]"></li>
						<li><img src="images/face/otm_thumb.gif" title="[奥特曼]"></li>
						<li><img src="images/face/j_thumb.gif" title="[囧]"></li>
						<li><img src="images/face/hufen_thumb.gif" title="[互粉]"></li>
						<li><img src="images/face/liwu_thumb.gif" title="[礼物]"></li>
						<li><img src="images/face/smilea_thumb.gif" title="[呵呵]"></li>
						<li><img src="images/face/tootha_thumb.gif" title="[嘻嘻]"></li>
						<li><img src="images/face/laugh.gif" title="[哈哈]"></li>
						<li><img src="images/face/tza_thumb.gif" title="[可爱]"></li>
						<li><img src="images/face/kl_thumb.gif" title="[可怜]"></li>
						<li><img src="images/face/kbsa_thumb.gif" title="[挖鼻屎]"></li>
						<li><img src="images/face/cj_thumb.gif" title="[吃惊]"></li>
						<li><img src="images/face/shamea_thumb.gif" title="[害羞]"></li>
						<li><img src="images/face/zy_thumb.gif" title="[挤眼]"></li>
						<li><img src="images/face/bz_thumb.gif" title="[闭嘴]"></li>
						<li><img src="images/face/bs2_thumb.gif" title="[鄙视]"></li>
						<li><img src="images/face/lovea_thumb.gif" title="[爱你]"></li>
						<li><img src="images/face/sada_thumb.gif" title="[泪]"></li>
						<li><img src="images/face/heia_thumb.gif" title="[偷笑]"></li>
						<li><img src="images/face/qq_thumb.gif" title="[亲亲]"></li>
						<li><img src="images/face/sb_thumb.gif" title="[生病]"></li>
						<li><img src="images/face/mb_thumb.gif" title="[太开心]"></li>
						<li><img src="images/face/ldln_thumb.gif" title="[懒得理你]"></li>
						<li><img src="images/face/yhh_thumb.gif" title="[右哼哼]"></li>
						<li><img src="images/face/zhh_thumb.gif" title="[左哼哼]"></li>
						<li><img src="images/face/x_thumb.gif" title="[嘘]"></li>
						<li><img src="images/face/cry.gif" title="[衰]"></li>
						<li><img src="images/face/wq_thumb.gif" title="[委屈]"></li>
						<li><img src="images/face/t_thumb.gif" title="[吐]"></li>
						<li><img src="images/face/k_thumb.gif" title="[打哈气]"></li>
						<li><img src="images/face/bba_thumb.gif" title="[抱抱]"></li>
						<li><img src="images/face/angrya_thumb.gif" title="[怒]"></li>
						<li><img src="images/face/yw_thumb.gif" title="[疑问]"></li>
						<li><img src="images/face/cza_thumb.gif" title="[馋嘴]"></li>
						<li><img src="images/face/88_thumb.gif" title="[拜拜]"></li>
						<li><img src="images/face/sk_thumb.gif" title="[思考]"></li>
						<li><img src="images/face/sweata_thumb.gif" title="[汗]"></li>
						<li><img src="images/face/sleepya_thumb.gif" title="[困]"></li>
						<li><img src="images/face/sleepa_thumb.gif" title="[睡觉]"></li>
						<li><img src="images/face/money_thumb.gif" title="[钱]"></li>
						<li><img src="images/face/sw_thumb.gif" title="[失望]"></li>
						<li><img src="images/face/cool_thumb.gif" title="[酷]"></li>
						<li><img src="images/face/hsa_thumb.gif" title="[花心]"></li>
						<li><img src="images/face/hatea_thumb.gif" title="[哼]"></li>
						<li><img src="images/face/gza_thumb.gif" title="[鼓掌]"></li>
						<li><img src="images/face/dizzya_thumb.gif" title="[晕]"></li>
						<li><img src="images/face/bs_thumb.gif" title="[悲伤]"></li>
						<li><img src="images/face/crazya_thumb.gif" title="[抓狂]"></li>
						<li><img src="images/face/h_thumb.gif" title="[黑线]"></li>
						<li><img src="images/face/yx_thumb.gif" title="[阴险]"></li>
						<li><img src="images/face/nm_thumb.gif" title="[怒骂]"></li>
						<li><img src="images/face/hearta_thumb.gif" title="[心]"></li>
						<li><img src="images/face/unheart.gif" title="[伤心]"></li>
						<li><img src="images/face/pig.gif" title="[猪头]"></li>
						<li><img src="images/face/ok_thumb.gif" title="[ok]"></li>
						<li><img src="images/face/ye_thumb.gif" title="[耶]"></li>
						<li><img src="images/face/good_thumb.gif" title="[good]"></li>
						<li><img src="images/face/no_thumb.gif" title="[不要]"></li>
						<li><img src="images/face/z2_thumb.gif" title="[赞]"></li>
						<li><img src="images/face/come_thumb.gif" title="[来]"></li>
						<li><img src="images/face/sad_thumb.gif" title="[弱]"></li>
						<li><img src="images/face/lazu_thumb.gif" title="[蜡烛]"></li>
						<li><img src="images/face/clock_thumb.gif" title="[钟]"></li>
						<li><img src="images/face/cake.gif" title="[蛋糕]"></li>
						<li><img src="images/face/m_thumb.gif" title="[话筒]"></li>
						<li><img src="images/face/weijin_thumb.gif" title="[围脖]"></li>
						<li><img src="images/face/lxhzhuanfa_thumb.gif" title="[转发]"></li>
						<li><img src="images/face/lxhluguo_thumb.gif" title="[路过这儿]"></li>
						<li><img src="images/face/bofubianlian_thumb.gif" title="[bofu变脸]"></li>
						<li><img src="images/face/gbzkun_thumb.gif" title="[gbz困]"></li>
						<li><img src="images/face/boboshengmenqi_thumb.gif" title="[生闷气]"></li>
						<li><img src="images/face/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
						<li><img src="images/face/daxiongleibenxiong_thumb.gif" title="[dx泪奔]"></li>
						<li><img src="images/face/cat_yunqizhong_thumb.gif" title="[运气中]"></li>
						<li><img src="images/face/youqian_thumb.gif" title="[有钱]"></li>
						<li><img src="images/face/cf_thumb.gif" title="[冲锋]"></li>
						<li><img src="images/face/camera_thumb.gif" title="[照相机]"></li>	
					</ul>
				</div>
			</div>
		</div>
		
		<div class="t_all"></div>
		<div class="clear"></div>

	</div>
	<!--end timeline-->


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="sg/tz_util.js"></script>
<script type="text/javascript" src="sg/sg.js"></script>

<script type="text/javascript">
	
	$(function(){

		loading("GN就是这么帅！");

		// 初始化
		// var message = sessionStorage.getItem("message");

		var message = localStorage.getItem("message");
		if(message){
			$(".t_all").html(message);
		}
		
		// 点击显示表情
		$(".t_face_btn").click(function(){
			$(".t_face_con").toggle(500);
		});

		// 选中QQ表情添加到文本框
		$("#q_ul").find("li").click(function(){
			var img = $(this).find("img").clone();
			$(".t_msg").append(img);
		});

		// 点击发布
		$(".t_send_btn").click(function(){
			var content = $(".t_msg").text();
			if(content == ""){
				$(".t_msg").focus();
				return;
			}

			$(".t_all").prepend("<div class='t_list animated bounceIn'>"+
			"				<div class='l_header'><img src='images/arry.jpg' alt='GN' width='66'	height='66' /></div>"+
			"				<div class='l_icon'></div>"+
			"				<div class='l_msg'>"+$('.t_msg').html()+"</div>"+
			"			</div>");

			// 存储到浏览器session中，浏览器关闭，即消失
			// sessionStorage.setItem("message",$(".t_all").html());

			// 本地存储，浏览器关闭仍然存在
			localStorage.setItem("message",$(".t_all").html());

		});

	});


/*
	$(window).scroll(function(){
		
	});
*/


</script>
</body>
</html>